<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       html,body{
           width: 100%;
           height: 100%;
       }
    </style>
</head>
<body>
    <div id="chart1" style="width:50%;height:50%;margin:auto;border: 1px solid #cccc;"></div>
</body>
<script src="../js/echarts.min.js"></script>
<script>
   

    var chart1 = echarts.init(document.getElementById('chart1'));

var option = {
    tooltip: {
        formatter: '{a}: {c}°'
    },
    toolbox: {
    
    },
    axisLine: {            // 坐标轴线
        lineStyle: {       // 属性lineStyle控制线条样式
        // color : [ //表盘颜色
        //         [ 0.1, "#01f5f3" ],//0-10%处的颜色
        //         [ 0.3, "#62c300" ],//11%-30%处的颜色
        //         [ 1, "#fe0000" ],//30%-100%处的颜色
        // ],
           
            shadowColor: '#fff', //默认透明
            shadowBlur: 10
        },
        width :30,//表盘宽度
    },
    splitLine: {           // 分隔线
        length: 15,         // 属性length控制线长
        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
            width: 3,
            color: '#fff',
            shadowColor: '#fff', //默认透明
            shadowBlur: 10
        }
    },
    pointer: {
        width: 2,
        shadowColor: '#fff', //默认透明
        shadowBlur: 5
    },
    color: [[0.1, "#01f5f3"], [0.3, "#62c300"], [1, "#fe0000"]],
    series: [
        {
            name: '温度',
            type: 'gauge',
            min:0,
            max:30,
            startAngle: 190, //开始角度
            endAngle: -20, //结束角度
            splitNumber:1,
            center: ["50%", "60%"],  //仪表位置
            radius:'50%',  //仪表大小
            detail: {
                formatter: '{value}',
                offsetCenter: [0, "79%"],         
                  backgroundColor: '#FFEC45',                  
                      height:30,
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontSize:16,
                    fontWeight:'nomal',
                    
                },
                // height:30,
                     rich : {
                          score : {
                             color : "white",
                             fontFamily : "微软雅黑",
                             fontSize : 9
                          }
                      }
            },
            data: [{
                    value: 30,
                    name:'炎热',
                    label: {
                        textStyle: {
                            fontSize: 8
                         }
                    }
                }]
        }
    ]
};
// 使用刚指定的配置项和数据显示图表。
chart1.setOption(option);
</script>
</html>